<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'addressListManage.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	 <link rel="stylesheet" type="text/css" href="jsTools/bootstrap-3.3.7-dist/css/bootstrap.min.css">
	<script type="text/javascript" src="jsTools/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
	
	<link rel="stylesheet" type="text/css" href="jsTools/jquery-easyui-1.5.1/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="jsTools/jquery-easyui-1.5.1/themes/icon.css">
	<script type="text/javascript" src="jsTools/jquery-easyui-1.5.1/jquery.min.js"></script>
	<script type="text/javascript" src="jsTools/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="jsTools/jquery-easyui-1.5.1/locale/easyui-lang-zh_CN.js" charset="utf-8"></script>
  </head>
  
  <body>
    	<div class="container">
   		<div class="row clearfix">
	
   				<div class="col-sm-2" >
   				
   				<ul class="list-unstyled list-inline">
   					<li><a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" id="add">增加联系人</a></li>
   					<li><a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" id="look">查看联系人</a></li>
   					<li><a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" id="updata">修/删联系人</a></li>
   				</ul>
				
   				</div>
   		<div class="col-sm-10">
   				<div id="divlook">
   				<table class="table table-bordered table-hover table-condensed">
				<thead>
					<tr><th>好友姓名</th><th>好友电话</th><th>邮箱地址</th><th>工作单位</th><th>家庭地址</th><th>QQ</th></tr>
				</thead>	
				<tbody>	
				</tbody>
				</table>
   						</div>
   				<div id="divadd" >
   						<form id="oneform">
   				<table class="table table-bordered table-hover table-condensed" >
				<thead>
					
				<tbody>
					<tr>
						<td>
							好友姓名
						</td>
						<td >
							<input name="name"  type="text">
						</td>						
					</tr>
					<tr class="success">
						<td>
							好友电话
						</td>
						<td>
							<input name="phone" type="text">
						</td>
						
					</tr>
					<tr class="error">
						<td>
							邮箱地址
						</td>
						<td >
							<input name="email" type="text">
						</td>
						
					</tr>
					<tr class="warning">
						<td>
							工作单位
						</td>
						<td >
							<input name="workplace" type="text">
						</td>
						
					</tr>
					<tr class="info">
						<td>
							家庭地址
						</td>
						<td >
							<input name="place" type="text">
						</td>
					</tr>
					<tr class="info">
						<td>
							QQ
						</td>
						<td >
							<input name="QQ" type="text">
						</td>
					</tr>
				</tbody>
			</table>  
				<div  class="col-sm-6 col-sm-offset-3"><button id="oneSumit"  type="button" class="btn btn-primary btn-default pull-left" ><span class=" glyphicon glyphicon-plus"></span>确定</button>
				<button  type="reset" class="btn  btn-default pull-right">清除</button></div>  						
				</form>
				</div>
   					<div id="divupdata" class="col-sm-4 col-sm-offset-4">
   					<div class="col-sm-12 "><input type="text" id="seachar"><button id="bSeachar" class="btn btn-link" ><span class=" glyphicon glyphicon-search"></span>查找</button></div>
			<div id="divupdata_div" class="easyui-dialog" title="好友修改、删除" 
			data-options="
				 closed :true,
				iconCls: 'icon-save',
				toolbar: [{
					text:'修改',
					iconCls:'icon-edit',
					handler:function(){var s= $('#divupdata_div input[name=name]').val(); var d=$('#divupdata_div input').serialize();
				$.post('friendsManage!updata.action','name='+s+'&'+d,function(data){if(data=='true') {alert('修改成功');$('#divupdata_div').dialog('close');} else alert('修改失败') })		
					}
				},'-',{
					text:'删除',
					iconCls:'icon-remove',
					handler:function(){var name=$('#divupdata_div input[name=name]').val(); 
						$.post('friendsManage!delect.action',{'name':name},function(data){if(data=='true') {alert('删除成功');$('#divupdata_div').dialog('close');} else alert('删除失败') })
					}
				}],
			">
			<table class="table table-bordered table-hover table-condensed" >
				<thead>
					
				<tbody>
					<tr>
						<td>
							好友姓名
						</td>
						<td >
							<input name="name"  disabled="disabled" type="text">
						</td>						
					</tr>
					<tr class="success">
						<td>
							好友电话
						</td>
						<td>
							<input name="phone" type="text">
						</td>
						
					</tr>
					<tr class="error">
						<td>
							邮箱地址
						</td>
						<td >
							<input name="email" type="text">
						</td>
						
					</tr>
					<tr class="warning">
						<td>
							工作单位
						</td>
						<td >
							<input name="workplace" type="text">
						</td>
						
					</tr>
					<tr class="info">
						<td>
							家庭地址
						</td>
						<td >
							<input name="place" type="text">
						</td>
					</tr>
					<tr class="info">
						<td>
							QQ
						</td>
						<td >
							<input name="QQ" type="text">
						</td>
					</tr>
				</tbody>
			</table>  
	</div>	
   						</div>
   				</div>
   		</div>  	
   	</div>
  </body>
  <script type="text/javascript">
  $(function(){$("#divadd").css("display","none");$("#divupdata").css("display","none");
  		$.get("friendsManage!select.action",function(data){var s=JSON.parse(data);
  						for(var i=0;i<s.length;i++)
  						{
  							$("#divlook table tbody").append("<tr><td>"+s[i].name+"</td><td>"+s[i].phone+"</td><td>"+s[i].email+"</td><td>"+s[i].workplace+"</td><td>"+s[i].place+"</td><td>"+s[i].QQ+"</td></tr>");
  						}
  		});
  
  });
  
  	$("#look").click(function() {$("#divlook").css("display","block");$("#divadd").css("display","none");
  	$("#divupdata").css("display","none");$("#divlook table tbody").empty();
  	$.get("friendsManage!select.action",function(data){var s=JSON.parse(data);
  						for(var i=0;i<s.length;i++)
  						{
  							$("#divlook table tbody").append("<tr><td>"+s[i].name+"</td><td>"+s[i].phone+"</td><td>"+s[i].email+"</td><td>"+s[i].workplace+"</td><td>"+s[i].place+"</td><td>"+s[i].QQ+"</td></tr>");
  						}
  		});
					});
					
					
	$("#add").click(function() {$("#divlook").css("display","none");$("#divadd").css("display","block");
	$("#divupdata").css("display","none");
					});
					
	$("#oneSumit").click(function(){var data=$("#oneform").serialize();
			$.post("friendsManage!insert.action",data,
				function(msg){ if(msg='true') alert("添加成功"); else alert("添加失败");
				});});				
	
	$("#updata").click(function() {$("#divlook").css("display","none");$("#divadd").css("display","none");
	$("#divupdata").css("display","block");
	});
	$("#bSeachar").click(function() {
		$.post("friendsManage!oneSelect.action",{"name":$("#seachar").val()},function(data) {var s=JSON.parse(data);if(s.name=='') alert("用户不存在");else{$('#divupdata_div').dialog('open');
		$.each(s, function(k, v){$("#divupdata_div input[name="+k+"]").val(v);});	}	
		});
	});
	
	
  </script>
</html>

